import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:flutterlib/common/datacenter/user_center.dart';
import 'package:flutterlib/common/style/quhui_style.dart';
import 'package:flutterlib/pages/activity/mine/activity_mine_list_widget_page.dart';
import 'package:flutterlib/pages/activity/viewmodel/activity_store.dart';
import 'package:flutterlib/widgets/quhui_tabbar_widget.dart';
import 'package:flutterlib/widgets/round_underline_tabindicator.dart';
import 'package:loading/indicator/ball_beat_indicator.dart';
import 'package:loading/loading.dart';
import 'package:mobx/mobx.dart';
import 'package:thrio/thrio.dart';


//用于加载内部继承上下拉的页面state的外部容器页面，
//适用于带tabbar，内部是list的页面的改造
class Page extends StatefulWidget {
  Page({Key key}) : super(key: key);

  @override
  PageState createState() => PageState();
}

class PageState extends State<Page>
    with SingleTickerProviderStateMixin {
  final ActivityStore store = ActivityStore();

  @override
  void initState() {
    super.initState();
    // store.fetchActivity()
    store.fetchMyActivity(currentUserId);
    store.fetchMyApplyActivity(currentUserId);
  }

  getTabItem(String title, int badge) {
    return Stack(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.fromLTRB(10, 5, 10, 5),
          child: Text(
            title,
            style: QuhuiConstant.smallText,
          ),
        ),
        Positioned(
          child: badge > 0
              ? Text(badge.toString(),
                  style:
                      QuhuiConstant.minMinSubGray6Text)
              : Text(""),
          right: 0.0,
          top: 5.0,
        ),
      ],
    );
  }

  renderItem(String item, int i, int length) {
    return VgTab(
      child: getTabItem(item, length),
    );
  }

  @override
  Widget build(BuildContext context) {
    print(context.widget.toStringShort());



    return Observer(
      builder: (_) {
        List<Widget> tabPageView = new List();
        List<Widget> tabViews = new List();
        final myActivityFuture = store.myActivitysFuture;
        final myApplyActivityFuture = store.myApplyActivitysFuture;
        if (myActivityFuture.status == FutureStatus.fulfilled &&
            myApplyActivityFuture.status == FutureStatus.fulfilled) {
          tabPageView.add(new ActivityMineListWidgetPage(
              type: 1, activitys: store.pendingActivitys));
          tabViews.add(renderItem("进行中", 1, store.pendingActivitys.length));
          tabPageView.add(new ActivityMineListWidgetPage(
              type: 2, activitys: myApplyActivityFuture.result));
          tabViews
              .add(renderItem("申请中", 2, myApplyActivityFuture.result.length));
          tabPageView.add(new ActivityMineListWidgetPage(
              type: 3, activitys: store.endActivitys));
          tabViews.add(renderItem("历史活动", 3, store.endActivitys.length));
          return new QuhuiTabBarWidget(
            type: TabType.top,
            tabItems: tabViews,
            tabBarType: 1,
            resizeToAvoidBottomPadding: false,
            tabViews: tabPageView,
            backgroundColor: QuhuiColors.mainBackgroundColor,
            indicatorColor: QuhuiColors.mainThemeColor,
            title: Text('我的活动', style: QuhuiConstant.normalTextBold),
            leading: Material(
              color: Colors.transparent,
              child: InkWell(
                borderRadius: const BorderRadius.all(
                  Radius.circular(32.0),
                ),
                onTap: () {
                  ThrioNavigator.pop();
                },
                child: Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                ),
              ),
            ),
            onPageChanged: (index) {},
          );
        }

        return new Scaffold(
          body: Container(
            color: QuhuiColors.white,
            child: Center(
              child: Loading(indicator: BallBeatIndicator(), size: 20.0, color: QuhuiColors.mainThemeColor),
            ),
          ),
        );

      },
    );
  }
}
